<template>
  <div>
    <Head :arr="arr" :tubiaoInfo="tubiaoInfo" />
  </div>
</template>

<script>
import Head from '@/components/dashboard/Head'
import { getIndexData } from '@/req/indexAjax'
export default {
  components: {
    Head
  },
  data () {
    return {
      arr: [
        {
          icon: 'icon-wenjian',
          price: '102,400',
          tit: '总订单',
          color: 'skyblue'
        },
        {
          icon: 'icon-renminbi',
          price: '102,400',
          tit: '总销售额',
          color: 'pink'
        },
        {
          icon: 'icon-icon-',
          price: '102,400',
          tit: '今日订单数',
          color: 'brown'
        },
        {
          icon: 'icon-Dollar',
          price: '102,400',
          tit: '今日销售额',
          color: 'orange'
        }
      ],
      tubiaoInfo: {
        orderData: '',
        amountData: '',
        xData: ''
      }
    }
  },
  methods: {
    async renderHead () {
      const {
        todayOrder,
        totalAmount,
        totalOrder,
        totayAmount,
        orderData,
        amountData,
        xData
      } = await getIndexData()

      const arr = [totalOrder, totalAmount, todayOrder, totayAmount]
      this.arr.forEach((el, index) => {
        el.price = arr[index]
      })
      this.tubiaoInfo.orderData = orderData
      this.tubiaoInfo.amountData = amountData
      this.tubiaoInfo.xData = xData

      this.$emit('event', this.tubiaoInfo)
    }
  },
  created () {
    this.renderHead()
  }
}
</script>

<style lang="less" scoped></style>
